<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0; padding: 0;
        }
        html,body {
            width: 100%; height: 100%;
        }
        #divbox {
            width: 200px; height: 200px;
            background-color: rgb(20, 226, 13);
            /* margin: 100px auto; */
            position: absolute;
        }
        
    </style>
</head>
<body>
    <div id="divbox" style="display: none;"><a>消失魔法</a></div>
    <button>登录</button>


    <script>
        var xx = document.querySelector('#divbox')
        var btn = document.querySelector('button')
        btn.onclick = function() {
            xx.style.display = 'block'
        }
        var miss = document.querySelector('a')
        miss.onclick = function() {
            xx.style.display = 'none'
        }
        xx.onmousedown = function(evt) {
            var e = evt || window.event
            document.onmousemove = function(aevt) {
                var aae = aevt || window.event
                var target = aae.target || aae.srcElement
                if(target.nodeName == 'DIV'){
                    var x = aae.clientX - e.offsetX
                    var y = aae.clientY - e.offsetY
                    // 边界
                    if (x<0) x=0
                    if (y<0) y=0
                    var maxX = (window.innerWidth||document.documentElement.clientWidth) - xx.offsetWidth
                    var maxY = (window.innerHeight||document.documentElement.clientHeight) - xx.offsetHeight
                    if (x>maxX) x=maxX
                    if (y>maxY) y=maxY
                    xx.style.left = x+'px'
                    xx.style.top = y+'px'
                }
            }
            document.onmouseup = function() {
                document.onmousemove = null
            }
        }
    </script>
</body>
</html>